<template>
	<view>
		<uni-section style="height: 5vh;margin: 4px;border-radius: 4px;" title="收款支付宝账户">
			<template v-slot>
				{{ alipayName? alipayName+ '（'+alipayAccount+'）' : '' }}
				<span @click="goWallet()" style="color: #606266;">修改</span>
				<uni-icons type="right" size="14"></uni-icons>
			</template>
		</uni-section>

		<view style="height: 95vh;margin: 4px 4px 0;overflow-y: scroll;">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无未提现数据">
				<uni-tr>
					<uni-th align="center" width="50">类型</uni-th>
					<uni-th align="center" width="40">金额</uni-th>
					<uni-th align="center" width="60">时间</uni-th>
					<uni-th align="center" width="50">备注</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in cashOuts" :key="index">
					<uni-td align="center">{{ item.type }}</uni-td>
					<uni-td align="center">{{ zeroTwo(item.amount)}}</uni-td>
					<uni-td align="center">{{ item.time }}</uni-td>
					<uni-td align="center">{{ item.remark }}</uni-td>
				</uni-tr>
			</uni-table>
			<div>
				<p v-if="cashOuts.length >= 50" style="text-align:center;margin-top: 10rpx;">一次最多可提现50单（您可多次提取）</p>
				<button v-if="cashOuts.length > 0" @click="openTiXian" style="width: 50%;"
					type="primary">提现{{ zeroTwo(actualTotal) }}</button>
			</div>
		</view>

		<!-- 普通弹窗 -->
		<uni-popup ref="tx" border-radius="16rpx">
			<view style="width: 600rpx;border-radius: 16rpx;background-color: #fff;padding: 16rpx;">
				<p style="text-align: center;font-size: 35rpx;line-height: 30px;">请确认提现信息</p>
				<uni-section title="收款支付宝姓名">
					{{alipayName}}
				</uni-section>
				<uni-section title="收款支付宝账号">
					{{alipayAccount}}
				</uni-section>
				<uni-section title="总提现金额">
					{{ zeroTwo(cashOutTotal)}}
				</uni-section>
				<uni-section title="退款涉及扣除">
					{{ zeroTwo(untreatedRefundTotal)}}
				</uni-section>
				<uni-section title="最终提现金额">
					{{ zeroTwo(actualTotal) +(actualTotal<=0?' 余额不足':'')}}
				</uni-section>
				<button :disabled="actualTotal<=0" @click="tiXian()" type="primary">确认 {{zeroTwo(actualTotal)}}</button>
			</view>
		</uni-popup>
		<uni-popup ref="tb" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="去填报" title="未填报提现收款账号信息" content="您可去我的钱包中填报设置"
				@confirm="goWallet()"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		payMentAccount,
		cashOutAndRefund,
		cashOut
	} from '@/api/my'

	export default {
		data() {
			return {
				loading: true,
				cashOuts: [],
				cashOutTotal: 0,
				untreatedRefundTotal: 0,
				actualTotal: 0,
				alipayName: undefined,
				alipayAccount: undefined
			}
		},
		onLoad() {
			payMentAccount().then(res => {
				console.log('--res--', res)
				if (res.code == 200) {
					let data = res.data
					this.alipayName = data.alipayName
					this.alipayAccount = data.alipayAccount
				}
			})
			this.getData()
		},
		activated() {
			payMentAccount().then(res => {

				if (res.code == 200) {
					let data = res.data
					this.alipayName = data.alipayName
					this.alipayAccount = data.alipayAccount
				}
			})
		},
		methods: {
			// 获取数据
			getData() {
				cashOutAndRefund().then(res => {
					console.log('--res--', res)
					this.cashOuts = res.cashOuts
					this.cashOutTotal = res.cashOutTotal
					this.untreatedRefundTotal = res.untreatedRefundTotal
					this.actualTotal = res.actualTotal
					this.loading = false
				})
			},
			openTiXian() {
				if (!this.alipayName || !this.alipayAccount) {
					this.$refs.tb.open()
					return
				}
				this.$refs.tx.open('center')
			},
			tiXian() {
				cashOut().then(res => {
					if (res.code == 200) {
						this.getData()
						this.$modal.alert('发起成功！您可在我的钱包中查看进度')
						this.$refs.tx.close()
					}
				})
			},
			goWallet() {
				this.$tab.navigateTo('/pages/mine/wallet')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.uni-table-td[data-v-321f8e79] {
		display: table-cell;
		padding: 6px 4px;
		font-size: 13px;
		border-bottom: 1px #EBEEF5 solid;
		font-weight: 400;
		color: #606266;
		line-height: 23px;
		box-sizing: border-box;
	}
</style>